<!--师资队伍展示教师列表组件-->
<template>
  <div class="teacher-list">
    <!-- 全部教师时-->
    <div v-if="currentSubcolumnName === '全部教师'">
      <!-- 按系别分组显示 -->
      <div v-for="departmentName in departmentNames" :key="departmentName" class="department-section">
        <template v-if="getTeachersByDepartment(departmentName).length > 0">
          <h3 class="department-title">{{ departmentName }}</h3>
          <hr class="department-divider">
          <div class="teacher-name-list">
            <router-link
              v-for="teacher in getTeachersByDepartment(departmentName)"
              :key="teacher.teacher_id"
              :to="{
                path: currentJumpPath,
                query: { id: teacher.teacher_id },
              }"
              class="teacher-name-item"
            >
              {{ teacher.name }}
            </router-link>
          </div>
        </template>
      </div>

      <!-- 显示不属于任何系别的教师 -->
      <div v-if="teachersNotInAnyDepartment.length > 0" class="department-section">
        <h3 class="department-title">其他</h3>
        <hr class="department-divider">
        <div class="teacher-name-list">
          <router-link
            v-for="teacher in teachersNotInAnyDepartment"
            :key="teacher.teacher_id"
            :to="{
              path: currentJumpPath,
              query: { id: teacher.teacher_id },
            }"
            class="teacher-name-item"
          >
            {{ teacher.name }}
          </router-link>
        </div>
      </div>
    </div>

    <!-- 非全部教师 -->
    <div v-else>
      <table>
        <thead>
        <tr>
          <th>姓名</th>
          <th>所在系</th>
          <th>职称</th>
          <th>研究方向</th>
          <th>邮箱</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="teacher in teachers" :key="teacher.teacher_id">
          <td>
            <router-link
              :to="{
                  path: currentJumpPath,
                  query: { id: teacher.teacher_id },
                }"
            >{{ teacher.name }}
            </router-link>
          </td>
          <td>{{ teacher.department }}</td>
          <td>{{ teacher.title_name }}</td>
          <td>{{ teacher.research_direction }}</td>
          <td>{{ teacher.email }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import service from "@/utils/service";


export default {
  data() {
    return {
      teachers: [], //非全部教师时存放教师列表
      departments: [],
      allTeachers: [], // 全部教师时所有教师的数组
    };
  },
  computed: {
    ...mapState(["subColumns"]),
    currentSubcolumnName() {
      const currentSubcolumn = this.subColumns.find(
        (sub) => sub.path === this.$route.path
      );
      return currentSubcolumn ? currentSubcolumn.name : "";
    },
    currentJumpPath() {
      const parts = this.$route.path.split("/");
      const path = "/" + parts[1] + "/Profile";
      return path;
    },
    // 获取所有系别名称
    departmentNames() {
      return this.departments.map(item => item.department_name);
    },
    // 获取不属于任何系别的教师
    teachersNotInAnyDepartment() {
      const departmentNames = this.departmentNames;
      return this.allTeachers.filter(
        teacher => !departmentNames.includes(teacher.department)
      );
    },
    displayedAllTeachers() {
      const departmentNames = this.departments.map(
        (item) => item.department_name
      );


      // 初始化一个对象来存储按系别过滤后的教师数据
      const filteredTeachersByDepartment = {};
      departmentNames.forEach((departmentName) => {
        filteredTeachersByDepartment[departmentName] = this.allTeachers.filter(
          (teacher) => teacher.department === departmentName
        );
      });

      // 初始化一个数组来存储不属于任何系别的教师数据
      const teachersNotInAnyDepartment = this.allTeachers.filter(
        (teacher) => !departmentNames.includes(teacher.department)
      );

      const displayedAllTeachers = [];

      departmentNames.forEach((departmentName) => {
        displayedAllTeachers.push(
          ...filteredTeachersByDepartment[departmentName]
        );
      });

      displayedAllTeachers.push(...teachersNotInAnyDepartment);

      console.log(filteredTeachersByDepartment);
      console.log(displayedAllTeachers);

      return displayedAllTeachers;
    },
  },
  watch: {
    currentSubcolumnName: {
      handler(newName) {
        this.getTeacherListByType(newName);
      },
      immediate: true,
    },
  },
  methods: {
    //获取所有的系别
    async getAllDepartments() {
      try {
        const apiUrl =
          "/departs/get";
        const response = await service.get(apiUrl);

        if (response.data.code === 20041) {
          this.departments = response.data.data;
          console.log(this.departments);
        }
      } catch {
        console.log("获取所有系别出错");
      }
    },
    //根据选项获取教师列表
    async getTeacherListByType(key) {
      try {
        const apiUrl = "/teachers/shiftTeacher";
        const response = await service.get(apiUrl, {
          params: {
            key: key,
          },
        });

        if (key === "全部教师") {
          if (response.data.code === 20041) {
            console.log(response.data.data);

            this.allTeachers = response.data.data;
          }
        } else {
          if (response.data.code === 20041) {
            this.teachers = response.data.data;
          }
        }
      } catch (error) {
        console.log("api请求出错", error);
      }
    },
    // 根据系别获取教师列表
    getTeachersByDepartment(departmentName) {
      return this.allTeachers.filter(teacher => teacher.department === departmentName);
    },
    //截断
    truncatedTitle(title) {
      if(title === null)
        return;
      const maxLength = 20;
      if (title.length > maxLength) {
        return title.slice(0, maxLength) + "...";
      }
      return title;
    },
  },
  created() {
    this.getAllDepartments();
  },
};
</script>


<style scoped>
.teacher-list {
  /* 整体样式 */
  width: 1100px;
  border: 1px solid #c3bebe;
  padding: 10px;
  margin-top: 10px;
}

a {
  text-decoration: none;
  color: black;
}

/* 系别部分样式 */
.department-section {
  margin-bottom: 30px;
}

.department-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 20px 0 10px 0;
  padding-left: 10px;
}

.department-divider {
  border: none;
  height: 1px;
  background-color: #407fd5;
  margin: 10px 0 15px 0;
}

/* 教师姓名列表样式 */
.teacher-name-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 20px;
  padding: 0 10px;
}

.teacher-name-item {
  display: inline-block;
  padding: 5px 0;
  font-size: 18px;
  color: #333;
  text-decoration: none;
  min-width: 80px;
  text-align: left;
}

.teacher-name-item:hover {
  color: #007bff;
  text-decoration: underline;
}

table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  margin-bottom: 20px; /* 教师项之间的底部间距 */
}

table tbody tr:nth-child(even) {
  background-color: #f5f5f5; /* 偶数行底色 */
}

table tbody tr:nth-child(odd) {
  background-color: #ffffff; /* 奇数行底色 */
}

td {
  padding: 10px;
  text-align: left; /* 文本左对齐 */
  font-size: 14px;
  border: none; /* 去掉表格边框 */
}

/* 设置每列的宽度 */
td:nth-child(1) {
  width: 10%;
  text-align: center;
}

td:nth-child(2) {
  width: 20%;
  text-align: center;
}

td:nth-child(3) {
  width: 15%;
  text-align: center;
}

td:nth-child(4) {
  width: 35%;
  text-align: center;
}

td:nth-child(5) {
  width: 20%;
  text-align: center;
}

.teacher-list h2 {
  text-align: center;
  color: #333; /* 设置标题文字颜色为#333，即较浅的颜色 */
}

.division-line {
  border: none;
  height: 1px;
  background-color: #ccc;
  margin: 10px 0;
}
</style>
